import React, { useEffect } from 'react'
import $ from 'jquery'
import { Toast } from 'antd-mobile'
import { ExamineCreator } from '../Redux/ActionCreator'
import { connect } from 'react-redux'
import './commodity.css'

const CommoditySearch = (props) => {
    useEffect(() => {
        props.dispatch(ExamineCreator())
    }, []);

    var pageSize = 5;    //每页显示的记录条数
    var curPage = 0;        //当前页
    var lastPage;        //最后页
    var direct = 0;        //方向
    var len;            //总行数
    var page;            //总页数
    var begin;
    var end;

    const errToasttwo = () => {
        Toast.info('您还没有输入任何内容!', 2)
    }
    const errToastthree = () => {
        Toast.info('抱歉，未搜索到您想要的内容!', 2)
    }

    $('#input').on('keypress', function (event) {
        if (event.keyCode == 13) {
            $('#start_search').trigger('click');
        }
    });

    $(document).ready(function display() {
        len = $(".mytable tr").length - 1;    // 求这个表的总行数，剔除第一行介绍
        page = len % pageSize === 0 ? len / pageSize : Math.floor(len / pageSize) + 1;//根据记录条数，计算页数
        curPage = 1;    // 设置当前为第一页
        displayPage(1);//显示第一页

        $("#start_search").click(function changePage() { // 转页
            $('tbody tr').css({ background: 'white' });
            if ($('#input').val() == '') {
                errToasttwo();
            }
            else {
                props.examinereducer.map((item, index) => {
                    if ($('#input').val() == props.examinereducer[index].commodity_temp_id
                        || $('#input').val() == props.examinereducer[index].commodity_temp_title
                        || $('#input').val() == props.examinereducer[index].business_id
                        || $('#input').val() == props.examinereducer[index].commodity_temp_money
                        || $('#input').val() == props.examinereducer[index].commodity_temp_time
                        || $('#input').val() == props.examinereducer[index].commodity_temp_t
                        || $('#input').val() == props.examinereducer[index].commodity_temp_addres
                    ) {
                        curPage = (index + 1) % pageSize === 0 ? (index + 1) / pageSize : Math.floor((index + 1) / pageSize) + 1;//根据记录条数，计算页数
                        direct = 0;
                        displayPage();
                        $('tbody tr').eq(index).css({ background: '#f5dec0' });
                        console.log(22)
                        
                    }
                    else if (index == props.examinereducer.length-1) {
                        errToastthree();
                        console.log(1)
                    }
                })
            }
        });

        len = $(".mytable tr").length - 1;
        page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1;//根据记录条数，计算页数
        curPage = 1;        //当前页
        direct = 0;        //方向
    });

    const displayPage = () => {
        if (curPage <= 1 && direct == -1) {
            direct = 0;
            return;
        } else if (curPage >= page && direct == 1) {
            direct = 0;
            return;
        }

        lastPage = curPage;

        document.getElementById("btn0").innerHTML = "当前 " + curPage + "/" + page + " 页 ";        // 显示当前多少页

        begin = (curPage - 1) * pageSize + 1;// 起始记录号
        end = begin + 1 * pageSize - 1;    // 末尾记录号

        if (end > len) end = len;
        $(".mytable tr").hide();    // 首先，设置这行为隐藏
        $(".mytable tr").each(function (i) {    // 然后，通过条件判断决定本行是否恢复显示
            if ((i >= begin && i <= end) || i == 0)//显示begin<=x<=end的记录
                $(this).show();
        });
    }


    // const search = () => {
    //     $("#start_search").click(function (event) {
    //         var key = $("#input").val();
    //         if (key) {
    //             event.stopPropagation();
    //             searchHistory($("#input").val());
    //         }
    //     });
    // }
    // search();

    // const searchHistory = (search_value) => {
    //     var len = 2; //存储的历史记录个数
    //     if (search_value != "" && !judgeRepeat(search_value)) {
    //         insertToHistoryList(search_value, len);
    //         if (localStorage.length < len) {
    //             localStorage.setItem(localStorage.length, search_value);
    //         } else {
    //             for (var i = 0; i < len; ++i) {
    //                 if (i == len - 1) {
    //                     localStorage.setItem(i, search_value);
    //                     return;
    //                 }
    //                 var next_value = localStorage.getItem(i + 1);
    //                 localStorage.setItem(i, next_value);
    //             }
    //         }

    //     }
    // }

    // const judgeRepeat = (search_value) => {
    //     for (var key in localStorage) {
    //         if (search_value == localStorage.getItem(key)) {
    //             return true;
    //         }
    //     }
    // }

    // const insertToHistoryList = (search_value, len) => {
    //     if (search_value != null) {
    //         var str = '<li><span>' + search_value + '<span> ' + '</li>';

    //     } else {
    //         var str = '';
    //     }

    //     if ($(".search-history-list").children().length == 0) {
    //         $(".search-history-list").append($(str));
    //     } else {
    //         if ($(".search-history-list").children().length < len) {
    //             $(str).insertBefore($(".search-history-list li:eq(0)"));
    //         } else {
    //             $(".search-history-list li:last").remove();
    //             $(str).insertBefore($(".search-history-list li:eq(0)"));
    //         }
    //     }
    // }

    // const buildHistory = () => {
    //     for (var i = 0; i < localStorage.length; ++i) {
    //         var search_name = localStorage.getItem(localStorage.length - 1 - i);
    //         if (search_name != null) {
    //             var str = '<li><span  onclick="window.location.href=\'{url answer/search}?word=' + search_name + '\'">' + localStorage.getItem(localStorage.length - 1 - i) + '</span>' + '</li>';

    //         } else {
    //             var str = '';
    //         }
    //         $(str).appendTo($(".search-history-list"));
    //     }
    // }

    // buildHistory();

    // $(".clear-history").click(function (event) {
    //     event.stopPropagation();
    //     localStorage.clear();
    //     $(".search-history-list").empty();
    // });

    // $('.sy_div').hide();

    return (
        <div>
            <input
                id='input'
                placeholder="搜索"
                autocomplete="off"
                onFocus={() => {
                    if (localStorage.length == 0) {
                        $('.sy_div').hide();
                    }
                    else {
                        $('.sy_div').show();
                    }
                }}
            />

            <i className='iconfont icon-sousuokuang'
                id='start_search'></i>
            <button id='abolish' onClick={() => document.getElementById('input').value = ''}>取消</button>


            {/* <div className="sy_div">
                <ul className="search-history-list"></ul>
                <span className="clear-history">清空全部搜索记录</span>
            </div> */}

        </div >

    );
}

const mapStateToProps = (state) => ({
    examinereducer: state.examinereducer
})

export default connect(mapStateToProps)(CommoditySearch);